<template>
  <div>
    {{msg}}
    <div>
      {{world.name}}{{world.country}}
    </div>
    <div class="name" v-html="world.content"></div>
    <div class="name" v-text="world.content"></div>
    <div v-bind:class="myClass">sdfsadfawe</div>
    {{changeInfo()}}
    <input type="checkbox" v-bind:checked="flag" >
    {{msg.split("").reverse().join("")}}
   
  </div>
  
   
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '张晓建',
      world:{
        name:"我是",
        country:"china",
        content:"<h1>title</h1>"
      },
      myClass:"active",
      flag:false
    }
  },
  metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: '关键字,webpack'
      },
      {                 // set meta
        name: 'description',
        content: '这是描述部分'
      }]
  },
  methods:{
    changeInfo:function(){
      this.myClass=""
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.active{color:red;}
</style>
